<template>
    <el-container class="source-container" direction="vertical">
        <el-container>
            <HeaderBtnGroup @handleClick="handleHeaderClick" :config="headerConfig">
            </HeaderBtnGroup>
        </el-container>
        <el-container>
            <div style="width:100%;">
                <el-table :data="targets" v-loading="loadingShow">
                    <el-table-column fixed label="序号" type="index" prop="id"></el-table-column>
                    <el-table-column label="名称" prop="name"></el-table-column>
                    <el-table-column v-if="whereDict.batch == 1" label="页数" prop="maxRow"
                        width="60px"></el-table-column>
                    <el-table-column v-if="whereDict.batch == 1" label="数量" prop="count" width="60px"></el-table-column>
                    <el-table-column label="登录" prop="login" width="60px">
                        <template slot-scope="scope">
                            <span>{{ scope.row.login ? "要" : "不" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="平台名称" prop="platform">
                        <template slot-scope="scope">
                            <span>{{ platformFilter(scope.row.platform) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="链接" prop="link" width="350px"></el-table-column>
                    <el-table-column label="状态" prop="status">
                        <template slot-scope="scope">
                            <span>{{ showStatusDesc(scope.row.status) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="生效" prop="enable">
                        <template slot-scope="scope">
                            <span>{{ scope.row.enable ? "是" : "否" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="220" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="handleCrawle(scope.row)">{{ buttonName }}</el-button>
                            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
        <el-dialog title="添加采集源" :visible.sync="dialogFormVisible" destroy-on-close @close="handleDialogClose"
            width="500px">
            <el-form :model="form" ref="addForm" label-position="right" :rules="rules">
                <el-form-item label="类型" :label-width="formLableWidth">
                    <el-select v-model="form.platform" placeholder="请选择平台">
                        <el-option v-for="item in platforms" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称" :label-width="formLableWidth">
                    <el-input v-model="form.name" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="链接" :label-width="formLableWidth">
                    <el-input v-model="form.link" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item v-if="form.batch == 1" label="页数" :label-width="formLableWidth">
                    <el-input v-model="form.maxRow" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-container class="radio-container">
                    <el-form-item class="direction-hor" label="登录">
                        <el-switch v-model="form.login"></el-switch>
                    </el-form-item>
                    <el-form-item class="direction-hor" label="生效">
                        <el-switch v-model="form.enable"></el-switch>
                    </el-form-item>
                    <el-form-item class="direction-hor" v-if="batch!=0" label="列表">
                        <el-switch v-model="form.batch"></el-switch>
                    </el-form-item>
                </el-container>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="addData('addForm')" size="mini">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<style lang="scss">
.source-container {

    .radio-container {
        margin-left: 0px;

        .direction-hor {
            display: inline-block;
            width: 100px;
            margin-bottom: 0px !important;

            .el-form-item__label {
                margin-left: 20px;
                width: auto;
            }

            .el-form-item__content {
                width: auto;
            }
        }
    }

    .el-dialog__body {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
    }

    .el-select {
        width:100%;
    }
}
</style>

<script>
import { DictDao } from "@/dao/dictDao"
import { DeepCopy } from "@/utils/Utils"
import { SourceDao } from "@/dao/sourceDao"
const { ipcRenderer: ipc } = require('electron')
import { HeaderBtnMixin } from "@/mixins/HeaderBtnMixin"
import HeaderBtnGroup from "@/components/Common/HeaderBtnGroup"
import { ArticleStatus, UsageScope, DictType } from "@/entities/Constant"

export default {
    name: "SpiderSource",
    mixins: [HeaderBtnMixin],
    props: {
        batch: {
            type: Number,
            default: -1,
        },
        buttonName: {
            type: String,
            default: "开始",
        },
        statusBtns: {
            type: Array,
            default: () => {
                return [
                    { status: -1, name: "全部", key: "*" },
                    { status: 1, name: "列表", key: "batch" },
                    { status: 0, name: "详情", key: "batch" },
                    { status: 0, name: "待采集", key: "status" },
                    { status: 1, name: "已采集", key: "status" },
                ]
            }
        }
    },
    components: {
        HeaderBtnGroup,
    },
    data() {
        return {
            targets: [],
            platforms: [],
            loadingShow: true,
            formLableWidth: "60px",
            form: SourceDao.initialForm(this.batch),
            rules: {
                name: [{
                    required: true,
                    message: "",
                    trigger: "blur",
                }]
            },
            whereDict: {
                batch: this.batch,
                status: -1,
            },
            headerConfig: {
                pageSize: SourceDao.pageSize,
                statusBtns: this.statusBtns,
            }
        }
    },
    mounted() {
        DictDao.Platforms(DictType.Platform,UsageScope.Spider).then((res) => {
            this.platforms = res
            this.getTargets(this.page)
        })
    },
    methods: {
        getTargets(page) {
            this.loadingShow = true
            SourceDao.fetchCount(this.whereDict, page).then((res) => {
                this.loadingShow = false
                this.targets = res.datas
                this.headerConfig.total = res.count
            })
        },
        platformFilter(value) {
            let obj = this.platforms.find(obj => obj.id == value)
            return obj ? obj.name : ""
        },
        handleCrawle(row) {
            if (this.buttonName == "开始") {
                ipc.send("puppeteer", { usageScope: UsageScope.Spider, data: row,raw:1 })
            } else {
                this.$emit("handleSetting",row)
            }
        },
        handleEdit(row) {
            let obj = DeepCopy(row)
            this.form = SourceDao.boolRow(obj)
            console.log("handleEdit",this.form,row)
            this.dialogFormVisible = true
        },
        handleDelete(id) {
            SourceDao.delete(id).then(res => this.getTargets(this.page))
        },
        handleDialogClose() {
            this.form = SourceDao.initialForm(this.whereDict.batch)
        },
        handleStatusFilter(row) {
            if (row.key == "*") {
                this.whereDict.batch = -1;
                this.whereDict.status = -1;
            } else {
                this.whereDict[row.key] = row.status
            }
            this.getTargets(this.page)
        },
        addData(formName) {
            const formData = this.form
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogFormVisible = false
                    SourceDao.save(formData).then(() => {
                        this.getTargets(this.page)
                        this.form = SourceDao.initialForm(this.whereDict.batch)
                    })
                }
            })
        },
        showStatusDesc(status) {
            let obj = ArticleStatus.Options().find(obj => obj.id == status)
            return obj ? obj.name : ""
        }
    },
}
</script>
